<template>
  <div>
    <div class="title">我的音乐云盘({{ cloudCount }})</div>

    <div>
      <el-table
        :data="cloudListInfo"
        @row-dblclick="playSong"
        style="width: 100%"
        stripe
        highlight-current-row
        v-double-click
      >
        <el-table-column type="index"> </el-table-column>
        <el-table-column prop="name" label="音乐标题" width="320">
        </el-table-column>
        <el-table-column prop="artistname" label="歌手" width="200">
        </el-table-column>
        <el-table-column prop="album" label="专辑" width="150">
        </el-table-column>
        <el-table-column prop="format" label="格式" width="60">
        </el-table-column>
        <el-table-column prop="fileSize" label="大小" width="80">
          <template slot-scope="scope">
            {{ scope.row.fileSize | fileSizeFilter }}
          </template>
        </el-table-column>
        <el-table-column prop="addTime" label="上传时间">
          <template slot-scope="scope">
            {{ scope.row.addTime | timeFilter }}
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
import { mapMutations } from 'vuex'

export default {
  data() {
    return {
      // 云盘音乐列表
      cloudListInfo: [],
      // 云盘音乐数量
      cloudCount: '',
    }
  },
  created() {
    this.getCloudList()
    this.routerIsActiveInfo()
  },
  filters: {
    // 上传歌曲时间过滤器
    timeFilter: function (val) {
      const dt = new Date(val)
      // 分秒
      // 年月日
      const y = dt.getFullYear()
      const m = (dt.getMonth() + 1 + '').padStart(2, '0')
      const d = (dt.getDate() + '').padStart(2, '0')

      return `${y}-${m}-${d}`
    },
    // 文件大小过滤器
    fileSizeFilter: function (val) {
      const num = val / 1024 / 1024
      return num.toFixed(1) + 'MB'
    },
  },
  methods: {
    ...mapMutations(['changeIsActive', 'changeMusicPlayInfo']),

    //  侧边栏高亮
    routerIsActiveInfo() {
      const isActive = 'cloud'
      this.changeIsActive(isActive)
    },
    //   获取音乐云盘列表
    async getCloudList() {
      const { data: res } = await this.$http({
        url: `/user/cloud`,
        withCredentials: true, //关键
      })
      // console.log(res)
      this.cloudCount = res.count
      this.getCloudListAboutInfo(res.data)
    },
    // 提取云盘列表要用的相关信息
    getCloudListAboutInfo(list) {
      let tmepListDatas = []

      let index = 0
      list.map((item) => {
        let listObj = {}

        /**
         * 音乐id id
         * 音乐时长 time
         * 音乐名称 name
         * 音乐专辑名称 album
         * 音乐图片 picUrl
         * 上传时间 addTime
         * 文件大小 fileSize
         * 音乐艺术家 artistname
         * 文件格式 format
         */
        listObj.id = item.simpleSong.id
        listObj.time = item.simpleSong.dt
        listObj.name = item.simpleSong.name
        listObj.album = item.simpleSong.al.name
        listObj.picUrl = item.simpleSong.al.picUrl
        listObj.addTime = item.addTime
        listObj.fileSize = item.fileSize

        let str = ''
        for (let i = 0; i < item.simpleSong.ar.length; i++) {
          str = str + item.simpleSong.ar[i].name
          if (i != item.simpleSong.ar.length - 1) {
            str = str + '/'
          }
        }
        listObj.artistname = str

        let format = item.fileName.split('.')
        listObj.format = format[format.length - 1]

        listObj.index = index
        index++

        return tmepListDatas.push(listObj)
      })

      this.cloudListInfo = tmepListDatas
      // console.log(this.cloudListInfo)
    },
    // 播放歌曲
    playSong(row) {
      let thePlaySongInfo = row
      let thePlaySongListInfo = this.cloudListInfo

      const info = {
        thePlaySongInfo,
        thePlaySongListInfo,
      }
      this.changeMusicPlayInfo(info)
    },
  },
}
</script>

<style lang="less" scoped>
.title {
  font-size: 20px;
  font-weight: 700;
  padding: 24px 0 24px 36px;
}

/deep/ div.cell {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
</style>